import React, { useState } from "react";
import { Swiper, Image } from "react-vant";
import "./index.css";
const Index: React.FC = () => {
  const [images, setImages] = useState([
    "https://img2.baidu.com/it/u=3997561372,3354810260&fm=253&fmt=auto&app=138&f=JPEG?w=700&h=467",
    "https://img2.baidu.com/it/u=3226309342,1061354646&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500",
    "https://img2.baidu.com/it/u=4063106076,3858764918&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=451",
    "https://img0.baidu.com/it/u=1276454611,2864312170&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500",
    "https://img1.baidu.com/it/u=234778548,1478475670&fm=253&fmt=auto&app=138&f=JPEG?w=737&h=500",
    "https://img2.baidu.com/it/u=2173632365,3610665084&fm=253&fmt=auto&app=138&f=JPEG?w=780&h=325",
  ]);
  return (
    <div>
      <div className="demo-swiper">
        <Swiper autoplay={true}>
          {images.map((image) => (
            <Swiper.Item key={image}>
              <Image lazyload src={image} />
            </Swiper.Item>
          ))}
        </Swiper>
      </div>
    </div>
  );
};
export default Index;
